<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人详情</title>
    <link rel="icon" href="../img/duitang.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/details.css">
    <script src="../js/axios.min.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="header-wrap">
        <div class="header-fixed">
            <Header class="header">
                <a id="logo" href="index.html">堆糖</a>
                <div class="category">
                    <h6>分类</h6>
                    <span></span>
                    <div>
                        <p>热门推荐</p>
                        <p>超省钱</p>
                        <ul>
                            <li>家居生活</li>
                            <li>美食菜谱</li>
                            <li>手工DIY</li>
                            <li>时尚搭配</li>
                            <li>美妆造型</li>
                            <li>婚纱婚礼</li>
                            <li>文字句子</li>
                            <li>插画绘画</li>
                            <li>影音书籍</li>
                            <li>人物明星</li>
                            <li>植物多肉</li>
                            <li>生活百科</li>
                            <li>搞笑萌宠</li>
                            <li>人文艺术</li>
                            <li>设计</li>
                            <li>古风</li>
                            <li>壁纸</li>
                            <li>旅行</li>
                            <li>头像</li>
                            <li>摄影</li>
                            <li>表情</li>
                            <li>素材</li>
                            <li>动图</li>
                        </ul>
                    </div>
                </div>
                <div class="search">
                    <input id="sea-ipt" type="text" placeholder="搜索感兴趣的内容">
                    <input id="sea-btn" type="button">
                    <ul>
                        <li class="sea-fir">搜索含<span></span>的图片</li>
                        <li>搜索含<span></span>的商品</li>
                        <li>搜索含<span></span>的文章</li>
                        <li>搜索含<span></span>的专辑</li>
                        <li>搜索含<span></span>的达人</li>
                    </ul>
                </div>
                <ul class="header-right">
                    <li id="left">堆糖生活家</li>
                    <li id="slog">注册/登录</li>
                    <img src="../img/tx.jpeg" alt="">
                    <ul>
                        <li><i></i>个人主页</li>
                        <li><i></i>账号设置</li>
                        <li><i></i>退出登录</li>
                    </ul>
                </ul>
            </Header>
        </div>
    </div>
    <!-- 主页面 -->
    <div class="box">
        <!-- 下载App -->
        <div class="download-app">
            <img src="../img/down02.png" alt="加载失败了">
        </div>
        <!-- 核心 -->
        <div class="content">
            <div class="con-left">
                <div class="follow">
                    <div class="con-top">
                        <div class="con-title">
                            <!-- <img src="" alt="" class="image"> -->
                            <a href="">一再而三</a>
                            <p>2月28日</p>
                            <div id="foll">关注</div>
                        </div>
                        <p>“希望我能成为你的小众喜好”</p>
                    </div>
                    <ul class="con-bottom">
                        <li>点赞</li>
                        <li>收藏</li>
                        <li>更多</li>
                    </ul>
                </div>
            </div>
            <div class="con-some"></div>
            <div class="con-right">
                <img src="">
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer-wrap">
        <footer class="footer">
            <div class="footer-top">

            </div>
            <ul class="footer-bottom">
                <li>沪ICP备10038086号-3</li>
                <li>沪公网安备31010102002072号</li>
                <li>有害内容举报电话：021-63462282</li>
                <li>上海市互联网违法和不良信息举报中心</li>
                <li>网上有害信息举报专区</li>
                <li>自营经营者信息</li>
                <li>增值电信业务经营许可证：沪B2-20180610</li>
                <li>网络文化经营许可证 沪网文〔2020〕1392-114号</li>
                <li>Copyright ©2021 duitang.com 版权所有</li>
            </ul>
        </footer>
    </div>
    <!-- 遮罩 -->
    <div id="mask"></div>
    <!-- 小小登录 -->
    <div id="smlog">
        <div class="title">登录<span></span></div>
        <div class="sm-box">
            <ul class="left">
                <li>
                    <p>手机号:</p>
                    <input class="ipt" type="text">
                </li>
                <li>
                    <p>密码:</p>
                    <input class="ipt" type="password">
                    <a id="forget" href="javascript:;">忘记密码?</a>
                </li>
                <li>
                    <input type="checkbox">
                    <span>记住我</span>
                    <a href="javascript:;">切换至海外手机号登录</a>
                </li>
                <li id="login">登录</li>
                <li class="log">
                    <div>
                        <i></i>
                        <p>QQ登录</p>
                    </div>
                    <div>
                        <i></i>
                        <p>微博登录</p>
                    </div>
                    <div>
                        <i></i>
                        <p>微信登录</p>
                    </div>
                </li>
            </ul>
            <div class="right">
                <img src="../img/down01.png" alt="">
                <p>扫一扫下载手机客户端浏览体验更佳</p>
            </div>
        </div>
        <a href="reg.html">还没有账号？立即注册</a>
    </div>
    <!-- 回到顶部 -->
    <div id="return-top"></div>
    <script src="../js/public.js"></script>
    <script>
        // 获取id 初始化
        let idstr = location.href.slice(location.href.indexOf('?') + 1)
        let idarr = idstr.split('&')
        let id = idarr[0].slice(3)
        let userid = idarr[1].slice(7)
        let resArr = JSON.parse(localStorage.getItem('dt_data'))
        $('.follow').attr('data-id', id).attr('user-id', userid)
        // 导入数据
        axios.get('index.json').then(function (res) {
            let arr = res.data.data.object_list
            arr.forEach(function (v) {
                if (v.id == id) {
                    // $('.con-title img').prop('src', isPic(v.atlas.sender.avatar, 200)) // 作者头像
                    let img = $('<img  src="">').addClass('image')
                    $('.con-title').prepend(img)
                    $('.con-title a').text(v.atlas.sender.username) // 作者名字
                    $('.con-title p').text(v.atlas.album.date_str) // 日期
                    $('.con-top>p').text(v.atlas.desc) // 标题
                    let top_ul = $('<ul></ul>') // 存放图片
                    v.atlas.blogs.forEach(function (pic) {
                        // let img = $('<img src="">').prop('src', isPic(pic.photo.path, 300)) // 头像
                        let img = $('<img src="">') // 头像
                        let li = $('<li></li>').append(img)
                        top_ul.append(li)
                    })
                    $('.con-top').append(top_ul)
                    if (resArr != null && resArr.length != 0) {
                        let agarr = resArr[0].pname.split('$')
                        if (agarr.some(s => s == v.id)) {
                            $('.con-bottom li').eq(0).addClass('agree').text(v.atlas.like_count + 1)
                        } else {
                            $('.con-bottom li').eq(0).text(v.atlas.like_count)
                        }
                        let srarr = resArr[1].pname.split('$')
                        if (srarr.some(s => s == v.id)) {
                            $('.con-bottom li').eq(1).addClass('star').text(v.atlas.favorite_count + 1)
                        } else {
                            $('.con-bottom li').eq(1).text(v.atlas.favorite_count)
                        }
                    } else {
                        $('.con-bottom li').eq(0).text(v.atlas.like_count)
                        $('.con-bottom li').eq(1).text(v.atlas.favorite_count)
                    }
                }
            })
        })
        // 是否点赞收藏关注
        if (resArr != null && resArr.length != 0) {
            let foArr = resArr[2].pname.split('$')
            if (foArr.some(v => v == userid)) {
                $('#foll').text('已关注').addClass('foll')
            }
        }
        // 关注的点击事件
        $('#foll').click(function () {
            let jsonStr = localStorage.getItem('duitang')
            if (jsonStr != null && jsonStr != '[]') {
                userObj = JSON.parse(jsonStr)
            }
            if (userObj) {

                let isFoll = $(this).hasClass('foll')
                if (isFoll) {
                    $(this).text('关注').removeClass('foll')
                } else {
                    $(this).text('已关注').addClass('foll')
                }
                update(userid, 2, isFoll)
            } else {
                oplogin()
            }
        })
        $('.con-top').on('mouseenter', 'ul li', function () {
            $('.con-right').css('display', 'block')
            let src = $(this).children().prop('src')
            $('.con-right img').prop('src', src)

            $(this).mousemove(function (e) {
                let x = e.offsetX
                let y = e.offsetY
                $('.con-right img').css({
                    marginLeft: -2.2 * x,
                    marginTop: -2.2 * y
                })
            })
        })
        $('.con-top').on('mouseleave', 'ul li', function () {
            $('.con-right').css('display', 'none')
        })
    </script>

</body>

</html>